<template>
    <div class="select" v-title data-title="选择项目">
        <headerTop title="选择项目">
            <div slot="headerRight" class="header-sure" @click="commitProject">确定</div>
        </headerTop>
        <div class="select-search">
            <div class="select-search-input">
                <van-icon name="search" color="#525D80" size="20" class="search-icon" style="margin-left: 10px"/>
                <input v-model="searchKeyWord" placeholder="请输入搜索的项目名称" class="select-input" @input="searchStart">
            </div>

        </div>

        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
            <div v-for="(item,index) in list" :key="index" class="select-content" @click="selectProject(index)">
                <div class="contents">
                    <div style="flex-shrink: 0">
                        <van-checkbox v-model="item.check"></van-checkbox>
                    </div>
                    <div class="content-right">
                        <span class="content-first">{{item.projectName}}</span>
                        <span class="content-second">{{"编号："+item.projectNum}}</span>
                    </div>
                </div>

                <div class="line"></div>
            </div>

        </van-list>
    </div>
</template>

<script>
    import headerTop from "@/components/headerTop";
    import {toast} from "@/utils/notify";

    export default {
        name: "selectProject",
        components: {
            headerTop
        },
        data() {
            return {
                pageSize: 20,
                pageNum: 0,
                list: [],
                loading: false,
                finished: false,
                allPage: 0,
                searchKeyWord:'',
                timer:null
            }
        },
        methods: {
            searchStart(){
                if (this.timer!=null){
                    clearTimeout(this.timer)
                }
                this.timer=setTimeout(()=>{
                    this.pageNum=0
                    this.getList(false,true,this.searchKeyWord)
                },500)
            },
            commitProject() {
                let data = {}
                let isSelect = false
                this.list.forEach((item) => {
                    if (item.check) {
                        data.projectName = item.projectName
                        data.projectId = item.id
                        isSelect = true
                    }
                })
                if (isSelect) {
                    localStorage.selectProject = JSON.stringify(data)
                    sessionStorage.setItem("selectProject", JSON.stringify(data))
                    this.$router.back()
                } else {
                    toast('请选择填报的项目')
                }
            },
            selectProject(position) {
                this.list.forEach((item, index) => {
                    if (position == index) {
                        item.check = true
                    } else {
                        item.check = false
                    }
                })
            },
            onLoad() {
                this.pageNum++;
                this.getList(true)
            },
            getList(isLoading,isSearch,keyWords) {
                let params = {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    projectStatus:'tianbao'
                }
                if (keyWords){
                    params.projectName=keyWords
                }
                let callBack = (res) => {
                    this.allPage = res.paginator.pages
                    if (isSearch){
                        this.list=[]
                    }
                    res.list.forEach((item) => {
                        item.check = false
                        this.list.push(item)
                    })
                    if (isLoading) {
                        this.loading = false;
                    }
                    if (this.pageNum >= this.allPage) {
                        this.finished = true;
                    }
                }
                this.$request('POST', "/api/mobile/project/list", params, callBack, this)
            }
        }
    }
</script>

<style scoped lang="scss">
    .select {
        min-height: 100vh;
        background: $page-bg;
        padding-top: $header-top;
        box-sizing: border-box;

        .header-sure {
            line-height: $header-top;
            color: #ffffff;
            font-size: 17px;
            padding-left: 6px;
        }
        .select-search{
            width: 100%;
            height: 60px;
            background: #ffffff;
            display: flex;
            align-items: center;
            .select-search-input{
                width: 90%;
                margin: 0 auto;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                border-radius: 20px;
                background: #F7F8FA;
                .select-input{
                    width: 100%;
                    height: 100%;
                    border-width: 0px;
                    font-size: 15px;
                    color: #323233;
                    background: #F7F8FA;
                    border-radius: 20px;
                    padding: 0 10px;
                    box-sizing: border-box;
                }
            }
        }
        .select-content {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            padding: 10px 12px 0;

            .contents {
                display: flex;
                align-items: center;
                justify-content: center;

                .content-right {

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;
                    margin-left: 10px;

                    .content-first {
                        font-size: 16px;
                        color: #323233;
                    }

                    .content-second {
                        margin-top: 5px;
                        font-size: 13px;
                        color: #969799;
                    }
                }
            }

            .line {
                width: 100%;
                height: 1px;
                background: $line-color;
                margin-top: 10px;
            }
        }
        input::-webkit-input-placeholder{
            color:#C8C9D5;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#C8C9D5;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#C8C9D5;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
            color:#C8C9D5;
        }
    }
</style>